<template>
    <div id="app">
        <alert v-for="statu in states" :status=statu>
            <div><h2>{{ statu }}</h2>
                <p>欢迎您来到w3cplus.com！</p>
            </div>
        </alert>
    </div>
</template>


<script>

    import alert from './components/alert'

    export default {
        name: 'app',
        components: {
            alert
        },
        props: ['status'],
        data() {
            return {
                isShow: true,
                states: ['info', 'success', 'danger', 'warning']
            }
        },
        computed: {
            alertStatus: function () {
                return this.status;
            }
        },
        methods: {
            close: function () {
                this.isShow = !this.isShow;
            }
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>
